import React,{ useEffect,useRef} from 'react';
import img from '../image/1.gif'
import '../App.scss'
const Img = (props) => {
    const imgs=useRef(null)
    let timer=null;
    useEffect(()=>{
        change()
        document.querySelector('.main').addEventListener('scroll',change)
    },)
    function change(){
         clearTimeout(timer)
        timer=setTimeout(()=>{
            const imgHeight=imgs.current.offsetHeight;
            const imgtop=imgs.current.offsetTop;
            const scroll=document.querySelector('.main').scrollTop
            const clheight=document.documentElement.clientHeight
            if((scroll+clheight)>=imgtop&&(scroll-imgHeight)<=imgtop){
                          imgs.current.src=props.src
                         }
        },500)
     
    }

    return (
      <img src={img} alt="" ref={imgs} className='img'/>
        
    );
}

export default Img;



